<template>
  <view class="class-main">
    <view class="header">
      <view class="info fxj-start">
        <image class="build" :src="build" alt />
        <view class="fxj-center">
          <view class="title">{{ buildingName }}</view>
          <view class="num">人数统计：1000人</view>
        </view>
      </view>
      <view>
        <uni-search-bar
          placeholder="请输入教室编号"
          @input="ksChange"
        ></uni-search-bar>
      </view>
    </view>
    <view class="class-con fxc-start">
      <view class="con-left">
        <view
          v-for="item in floorNums"
          :key="item"
          class="menu-item"
          :class="{ on: floor == item }"
          @click="changeFloor(item)"
          >{{ item }} L</view
        >
      </view>
      <view class="con-right">
        <view class="room-title">
          <view class="txt">教室号</view>
        </view>
        <view class="room-list">
          <view
            v-for="item in fieldInfoList"
            :key="item"
            class="room-item fx-center"
          >
            <image class="icon" :src="thumb" mode />
            <view class="room-num">
              {{ item.name }}
            </view>
            <view class="add" @click="add(item)">+</view>
          </view>
        </view>
      </view>
    </view>
    <view class="class-bottom fx">
      <view class="menu-left fx-center">
        <image class="wg" src="../../static/img/c.png" mode="" />
      </view>
      <view class="menu-right flex fxc-between">
        <view @click="openPopup" class="right-con fx-center">
         <image class="cd" src="../../static/img/wg.png" mode="" />
          <view class="name">
            已选课室
            <view class="num">{{ choosenList.length }}</view>
          </view>
        </view>
        <view class="right-button" v-if="pageQuery.startTime" @click="give"
          >分配</view
        >
        <view class="right-button" v-else @click="openNpopup">马上获取</view>
      </view>
    </view>

    <uni-popup class="class-popup" ref="cpopup" type="bottom" :allowScroll="true">
      <view class="title fxj-start">
        <image class="class-img" :src="build" mode />
        <view class="txt">{{ buildingName }}</view>
      </view>
      <view class="list">
        <view v-for="item in choosenList" class="item fx fx-center">
          <image class="item-left" :src="thumb" mode />
          <view class="class-num flex fx-center">{{ item.name }}</view>
          <view class="close" @click="del(item.id)">
             <image  class="close-img" :src="close" mode />
          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup class="class-number" ref="npopup" type="center">
      <view class="title">当前人数汇总</view>
      <view class="list">
        <view class="item fxc-between">
          <view class="left fxv-center">
           <image class="dn" src="../../static/img/dn.png" mode="" />
            <view class="txt">课室</view>
          </view>
          <view class="right">
            <image class="ren" src="../../static/img/ren.png" mode="" />
            <view class="txt">人数</view>
          </view>
        </view>
        <view
          v-for="item in amountList"
          :key="item"
          class="item fxc-between"
          :class="{ on: item == 2 }"
        >
          <view class="left">{{ item.fieldName }}</view>
          <view class="right">{{ item.amount }}</view>
        </view>
      </view>
      <view class="button" @click="$refs.npopup.close()">取消</view>
    </uni-popup>

    <uni-popup ref="popup" :type="resultType">
      <uni-popup-message :type="resultType" :message="message"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
import store from "../../store/index.js";
import uniSearchBar from "@/components/uni-search-bar/uni-search-bar.vue";
export default {
  data() {
    return {
      message: "分配成功",
      resultType: 'success',
      fieldId: null,
      floorNums: [],
      floor: 1,
      curFloor: 1,
      uuhe: "2020-05-06 10:24:00",
      thumb: require("../../static/img/dianano.png"),
      build: require("../../static/img/build.png"),
      close: require("../../static/img/close.jpg"),
      fieldInfoList: [],
      buildingName: "",
      choosenList: [],
      amountList: [],
      ksNumber:0
    };
  },
  components: { uniSearchBar },
  mounted() {
    var date = new Date();
    this.uuhe =
      date.getFullYear() +
      "-" +
      (date.getMonth() + 1) +
      "-" +
      parseInt(date.getDate());
    this.fieldId = this.pageQuery.fieldId || 1;
    this.buildingName = store.getters.getChoosenBuilding;
    this.getFloor();
  },
  methods: {
    async fieldClassroom() {
      let that = this;
      let res;
      if (this.pageQuery.startTime) {
        res = await this.$api.fieldTypeAlloc(
          `${this.pageQuery.fieldId}?startTime=${this.pageQuery.startTime}&endTime=${this.pageQuery.endTime}&curFloor=${this.floor}`
        );
        if (res.code == 200) {
          that.fieldInfoList = res.data;
        }
      } else {
        res = await this.$api.fieldClassroom({
          fieldTypeId: this.fieldId,
          paramDate: this.uuhe,
          curFloor: this.floor,
        });
        if (res.code == 200) {
          that.fieldInfoList = res.data.fieldInfoList;
        }
      }
    },

    ksChange (e) {
      if(e.value.length > 2) {
        this.changeFloor(Math.floor(parseInt(e.value)/100))
      } else {

      }
    },
    async getFloor() {
      let that = this;
      let res = await this.$api.getFloor({
        fieldTypeId: this.fieldId,
      });
      if (res.code == 200) {
        that.floorNums = res.data.floorNums;
        if (that.floorNums.length) {
          that.floor = that.floorNums[0];
        }

        this.fieldClassroom();
      }
    },
    async fieldPeopleAmount(fieldIds) {
      let that = this;
      let res = await this.$api.fieldPeopleAmount({
        fieldIds,
      });
      if (res.code == 200) {
        that.amountList = res.data;
        this.$refs.npopup.open();
      } else {
        this.message = '设备异常'
        this.$refs.popup.open();
      }
    },
    changeFloor(floor) {
      this.floor = floor;
      this.fieldClassroom();
    },
    add(item) {
      let has = false;
      for (var i = 0; i < this.choosenList.length; i++) {
        if (this.choosenList[i].id == item.id) {
          has = true;
        }
      }

      if(this.choosenList.length >= 9) {
        this.message = '选择的课室数量不能超过9间'
        this.resultType = 'error'
        this.$refs.popup.open();

        setTimeout(() => {
          this.$refs.popup.close();
        }, 1500);

        return;
      }

      if (!has) {
        this.choosenList.push(item);
      }
    },

    del(id) {
      for (var i = 0; i < this.choosenList.length; i++) {
        if (this.choosenList[i].id == id) {
          this.choosenList.splice(i, 1);
        }
      }
    },
    // 显示弹窗
    openPopup() {
      this.$refs.cpopup.open();
    },

    // 显示弹窗
    openNpopup() {
      let ary = [];
      for (var i = 0; i < this.choosenList.length; i++) {
        ary.push(this.choosenList[i].id);
      }
      this.fieldPeopleAmount(ary);
      //this.$refs.npopup.open();
    },

    async give() {
      let ary = [];
      for (var i = 0; i < this.choosenList.length; i++) {
        ary.push(this.choosenList[i].id);
      }
      let res = await this.$api.applyAssign(
        {},
        `/${this.pageQuery.applyFormId}?note=${this.pageQuery.note}&fieldIds=${ary.join(",")}`
      );

     
      if (res && res.code == 200) { 
        this.message = '分配成功'
        this.resultType = 'success'
        this.$refs.popup.open();
        setTimeout(() => {
          this.$refs.popup.close();
        }, 1500);
				
				uni.switchTab({
					url: "/pages/gongzuo/index",
				});
      } else {
          this.message = '分配失败，请勿重复分配'
          this.resultType = 'error'
          this.$refs.popup.open();
          setTimeout(() => {
            this.$refs.popup.close();
          }, 1500);
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../static/less/flex.less";
.class-main {
  height: 100%;
  padding-bottom: 100upx;

  .wg {
    width: 60upx;
    height: 60upx;
  }

  .close-img {
    width: 40upx;
    height: 40upx;
  }

  .cd {
    width: 40upx;
    height: 40upx;
  }

  .dn {
    width: 40upx;
    height: 40upx;
  }

   .ren {
    width: 40upx;
    height: 40upx;
  }

  .build {
    margin-right: 20upx;
    height: 120upx;
    width: 120upx;
  }

  .header {
    padding: 20upx 30upx;
    background-color: #fff;

    .info {
      margin-bottom: 20upx;
    }

    .title {
      margin-bottom: 10upx;
      font-size: 32upx;
      color: #333;
    }

    .num {
      font-size: 24upx;
      color: #666;
    }

    /deep/.uni-searchbar__box {
      background-color: #fff;
      height: 76upx;
    }

    /deep/.uni-searchbar__cancel {
      line-height: 76upx;
    }
  }

  .class-con {
    margin-top: 20upx;
    .con-left {
      margin-right: 16upx;
      background: #fff;
      text-align: center;
      width: 120upx;

      .menu-item {
        line-height: 120upx;
        border-bottom: 2upx solid #eee;

        &.on {
          background: rgb(20, 163, 255);
          color: #fff;
        }
      }
    }

    .con-right {
      position: relative;
      padding-top: 80upx;
      flex: 1;
      background: #fff;
      height: 100%;

      .room-title {
        position: absolute;
        left: 0;
        top: 0;
        line-height: 80upx;
        width: 100%;
        text-align: center;

        .txt {
          position: relative;
          z-index: 2;
          background: #fff;
          padding: 0 20upx;
          width: 180upx;
          margin: auto;
        }

        &:after {
          position: absolute;
          display: block;
          content: "";
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 1;
          width: 300upx;
          height: 1upx;
          background: #eee;
        }
      }

      .room-item {
        height: 120upx;
        padding: 0 20upx;
        border-bottom: 1upx solid #eee;

        .icon {
          width: 60upx;
          height: 60upx;
        }

        .room-num {
          flex: 1;
          text-align: center;
        }

        .add {
          width: 60upx;
          height: 60upx;
          line-height: 56upx;
          text-align: center;
          font-size: 40upx;
          background: rgb(129, 188, 255);
          border-radius: 50%;
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }

  .class-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 96upx;
    background: #fff;
    z-index: 9999;

    .menu-left {
      width: 120upx;
      border-right: 1upx solid #eee;
    }

    .menu-right {
      padding-left: 20upx;
    }

    .name {
      position: relative;
      margin-left: 10upx;
      font-size: 28upx;
      color: #999;

      .num {
        position: absolute;
        right: -20upx;
        width: 32upx;
        height: 32upx;
        border-radius: 50%;
        background: rgba(248, 8, 8, 1);
        color: #fff;
        line-height: 32upx;
        text-align: center;
        top: -20upx;
        font-size: 24upx;
      }
    }

    .right-button {
      width: 230upx;
      height: 100%;
      line-height: 96upx;
      text-align: center;
      font-size: 30upx;
      background: rgb(20, 163, 255);
      color: #fff;
    }
  }

  .class-popup {  
     .list {
      max-height: 900upx;
      overflow-y: auto;

       -webkit-overflow-scrolling: touch;
      
      &::-webkit-scrollbar{
        display: none;
         -webkit-overflow-scrolling: touch;
      }
    }


    /deep/.uni-transition {
      bottom: 96upx !important;
    }
    /deep/.uni-popup__wrapper-box {
      background: #fff;

      .title {
        padding-left: 30upx;
        height: 80upx;

        .class-img {
          width: 48upx;
          height: 48upx;
          border-radius: 50%;
        }

        .txt {
          margin-left: 16upx;
          color: #666;
          font-size: 28upx;
        }
      }

      .item {
        padding: 0 20upx;
        border-bottom: 2upx solid #eee;

        .item-left {
          width: 48upx;
          height: 48upx;
        }

        line-height: 96upx;

        .class-num {
          font-size: 28upx;
        }
      }
    }
  }

  .class-number {
    /deep/.uni-popup__wrapper-box {
      background: #fff;
      width: 620upx;
      height: 652upx;
      border-radius: 20upx;
    }

    .item {
      padding: 20upx 20%;

      & + .item {
        border-bottom: 2upx dashed #eee;
      }

      &.on {
        position: relative;

        &:after {
          display: block;
          content: "";
          width: 4upx;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background: #f80808;
        }
      }
    }

    .title {
      padding: 20upx 0;
      text-align: center;
      color: rgb(75, 88, 103);
      font-size: 32upx;
    }

    .icon {
      width: 46upx;
      height: 46upx;
    }

    .txt {
      margin-top: 10upx;
      color: #999;
      font-size: 28upx;
    }

    .button {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 80upx;
      width: 100%;
      line-height: 80upx;
      background: #14a3ff;
      color: #fff;
      text-align: center;
      font-size: 28upx;
      border-bottom-right-radius: 20upx;
      border-bottom-left-radius: 20upx;
    }
  }
}
</style>
